<template>
    <!-- <div class="article-item-container">
        文章
    </div> -->
    <van-cell class="article-item-wrap" :to="{ name : 'article', params:{ articleId: articles.art_id } }">
        <!-- title插槽 -->
        <div slot="title" class="title van-multi-ellipsis--l3">{{ articles.title }}</div>
        <!-- title插槽 -->
        <!-- label 插槽 -->
        <div slot="label">
            <div 
                v-if="articles.cover.type === 3"
                class="cover-wrap"
                >
                <div v-for="(item,index) in articles.cover.images"
                        :key="index" class="cover-item-wrap">
                    <van-image
                        class="cover-item"
                        :src="item"
                    />
                </div>
            </div>
            <div class="label-wrap">
                <span>{{ articles.aut_name }}</span>
                <span>{{ articles.comm_count }}评论</span>
                <span>{{ articles.pubdate | relativeTime }}</span>
            </div>
        </div>
        <!-- label 插槽 -->
        <!-- 默认插槽 -->
        <van-image
            v-if="articles.cover.type === 1"
            class="cover-img"
            fit="cover"
            :src="articles.cover.images[0]"
        />
        <!-- 默认插槽 -->
    </van-cell>
</template>

<script>
    export default {
        name:'articleItem',
        props:{
            articles:{
                type: Object,
                required: true
            }
        }
    }
</script>

<style lang="less" scoped>
.article-item-wrap{
    .title{
        font-size: 16px;
        color: #3a3a3a;
    }
    /deep/.van-cell__value{
        flex: unset;
        width: 116px;
        height: 73px;
        margin-left: 12px;
    }
    .cover-img{
        width: 116px;
        height: 73px;
    }
    .cover-wrap{
        display: flex;
        .cover-item-wrap{
            flex: 1;
            height: 73px;
            &:not(:last-child){
                margin-right: 4px;
            }
            .cover-item{
                width: 100%;
                height: 73px;
            }
        }
    }

    .label-wrap{
        font-size: 11px;
        color: #b4b4b4;
        span{
            margin-right: 12px;
        }
    }
}
</style>